<template>
	<view class="rows" :style="{background:pageData.bgColor,padding:`0 ${pageData.margin*2}rpx`,'--bgcolor':pageData.foreColor||pageData.bgColor||'#fff'}" >
		
	    <view class="styleOne" v-if="!pageData.style">
			<view :style="{backgroundColor:pageData.foreColor}" class="d-flex" :class="[{'j-sa': infoData.length < 4},{'max': infoData.length > 3}]">
				<view :class="['d-flex', { 'one' : infoData.length == 1 }, { 'two' : infoData.length == 2 }, { 'three' : infoData.length > 2 }]" 
					v-for="(item,index) in infoData" :key="index" :style="{'--color':item.backColor}">
					<view class="left flexac f-column p-re bold600 white">
						<view>
							<text>{{item.unit}}</text>
							<text class="price">{{item.price}}</text>
							<text>{{item.priElse}}</text>
						</view>
						<view class="tit ellipsis text-center">{{item.title}}</view>
					</view>
					<view class="right flexac" v-if="item.receivingStatus">已领取</view>		 
					<view class="right flexac" @click="_GETCOUPONS(item.cou_id,item)" v-else>立即领取</view>
				</view>
			</view>
		</view>

		<view class="styleTwo" v-if="pageData.style == 1">
			<view :style="{backgroundColor:pageData.foreColor}" class="d-flex" :class="[{'j-sa': infoData.length < 3},{'max': infoData.length > 2}]">
				<view :class="['d-flex', { 'one' : infoData.length == 1 }, { 'two' : infoData.length > 1 }]" v-for="(item,index) in infoData" :key="index" 
					:style="{'--color2':item.backColor,background:'#fff'}" @click="_GETCOUPONS(item.cou_id,item)">
					<view class="left flexac p-re bold600" :style="{background:item.backColor2}">
						<view>
							<text class="price">{{item.price}}</text>
							<text class="unit">{{item.priElse}}</text>
						</view>
					</view>
					<view class="right flex-1 d-flex f-column j-centert" :style="{background:item.backColor2}">
						<view class="tit ellipsis bold600">{{item.title}}</view>
						<view class="end" v-if="item.endTime == '0'">永久有效</view>
						<view class="end" v-else>{{item.endTime.split(' ')[0]}}到期</view>
					</view>
				</view>
			</view>
		</view>
		
		<showModel @cancelFunc='showModal=false' goHome='0' v-if='showModal' type='2'></showModel>
		
		<u-popup :show="showPop" mode="center" bgColor="transparent">
			<view class="cont p-re">
				<view class="close p-ab">
					<u-icon name="close-circle" size="30px" color="#F9F9F9"  @click="showPop=false"></u-icon>
				</view>
				<image src="https://sra.mogoie.com/Uploads/diy/img/couBg.png"></image>
				<view class="left p-ab flexac f-column">
					<view class="price bold600">
						<text class="size26">{{couInfo.unit}}</text>
						<text class="size60 m-left10 m-right10">{{couInfo.price}}</text>
						<text class="size26">{{couInfo.priElse}}</text>
					</view>
					<view class="size34 color_33 ellipsis text-center">{{couInfo.title}}</view>
				</view>
				<view class="right p-ab color_33 flexac f-column">
					<view class="size26" v-if="couInfo.endTime=='0'">永久有效</view>
					<view class="flexac f-column size26 line40" v-else>
						<view>有效期至</view>
						<view v-if="couInfo.endTime">{{couInfo.endTime.split(' ')[0]}}</view>
					</view>
				</view>
				<view class="btn flexac size30 p-ab" @click="toUrl('/userPage/user/discount_coupon')">立即查看</view>
			</view>
		</u-popup>
	</view>
	
</template>

<script>
	import {mapState} from 'vuex';
	export default {
		name: 'coupon',
		props:['pageData'],
		data() {
			return {
				infoData:[],
				showModal: false,
				showPop: false,
				couInfo: {}
			}
		},
		mounted() {
			this.getBlockInfo();
		},
		methods: {
			async getBlockInfo(){
				const result = await this.$getBlockInfo(this.pageData.list);
				if(!result.count) return		 
				this.infoData = result.list?.map(item=>({
					...item,
					backColor2: this.hexToRgba(item.backColor, .1) // 透明处理
				}))
			},
			// 领取优惠券
			_GETCOUPONS(couponsId,item){
				let vId = uni.getStorageSync('vid')
				if(!vId) {
					this.showModal = true
				} else {

					if(item.receivingStatus){
						uni.showToast({
							icon: 'none',
							title: '您已经领取过，可前往列表查看',
							duration: 2000
						})
						return
					}

					this.$http.post({
						url: '/SRA_simMallApi/SortOneCoupons',
						data: {
							vId,
							couponsId
						}
					}).then(res=>{
						if(res.code == 100 && res.data){
							this.couInfo = item
							this.showPop = true
							this.getBlockInfo()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.notice||'领取失败，请稍后再试',
								duration: 2000
							})
						}
					})
				}
			},
			hexToRgba(hex,opacity){
				return 'rgba(' + parseInt('0x' + hex.slice(1, 3)) + ',' + parseInt('0x' + hex.slice(3, 5)) + ',' + parseInt('0x' + hex.slice(5, 7)) + ',' + opacity + ')'
			}
		},
		computed:{
			...mapState(['color'])
		}
	}
</script>

<style lang="scss" scoped>
	.styleOne {
		.left {
			height: 100%;
			border-radius: 12rpx 0 0 12rpx;
			background: var(--color);
		}
		.right {
			height: 100%;
			border-radius: 0 12rpx 12rpx 0;
			background: #f9f9f9;
			writing-mode: vertical-lr; 
			text-orientation: upright;  
			color:var(--color);
		}
		// 一行一个
		.one {
			width: 684rpx;
			height: 168rpx;
			.left {
				width: 564rpx;
				&::after { // 右半圆
					content: '';
					position: absolute;
					width: 20rpx;
					height: 40rpx;
					background: var(--bgcolor);
					border-radius: 0 20rpx 20rpx 0;
					top: 50%;
					left: 0;
					margin-top: -20rpx;
				}
				text {
					font-size: 28rpx;
				}
				.price {
					font-size: 56rpx;
					margin: 0 8rpx;
				}
				.tit {
					font-size: 32rpx;
				}
			}
			.right {
				width: 120rpx;
				font-size: 28rpx;
			}
		}
		// 一行两个
		.two {
			width: 332rpx;
			height: 128rpx;
			.left {
				width: 252rpx;
				&::after {
					content: '';
					position: absolute;
					width: 16rpx;
					height: 32rpx;
					background: var(--bgcolor);
					border-radius: 0 16rpx 16rpx 0;
					top: 50%;
					left: 0;
					margin-top: -16rpx;
				}
				.price {
					font-size: 52rpx;
					margin: 0 4rpx;
				}
				.tit {
					font-size: 28rpx;
				}
			}
			.right {
				width: 80rpx;
			}
		}
		// 一行三个或多个
		.three {
			width: 216rpx;
			height: 100rpx;
			.left {
				width: 156rpx;
				&::after {
					content: '';
					position: absolute;
					width: 12rpx;
					height: 24rpx;
					background: var(--bgcolor);
					border-radius: 0 12rpx 12rpx 0;
					top: 50%;
					left: 0;
					margin-top: -12rpx;
				}
				text {
					font-size: 20rpx;
				}
				.price {
					font-size: 40rpx;
					margin: 0 2rpx;
				}
				.tit {
					font-size: 22rpx;
				}
			}
			.right {
				width: 60rpx;
				font-size: 20rpx;
			}
		}
	}
	.styleTwo {
		.one, .two {
			border-radius: 12rpx;
			box-sizing: border-box;
			border: 4rpx solid var(--color2);
			color: var(--color2);
		}
		.one {
			width: 684rpx;
			height: 168rpx;
			.left {
				width: 216rpx;
				height: 100%;
				&::after { // 下半圆
					content: '';
					position: absolute;
					width: 40rpx;
					height: 20rpx;
					background: var(--bgcolor);
					border-radius: 0 0 20rpx 20rpx;
					top: -4rpx;
					right: -40rpx;
					border: 4rpx solid var(--color2);
					box-sizing: border-box;
					border-top: 4rpx solid var(--bgcolor);
				}
				&::before { // 上半圆
					content: '';
					position: absolute;
					width: 40rpx;
					height: 20rpx;
					background: var(--bgcolor);
					border-radius: 20rpx 20rpx 0 0;
					bottom: -4rpx;
					right: -40rpx;
					border: 4rpx solid var(--color2);
					box-sizing: border-box;
					border-bottom: 4rpx solid var(--bgcolor);
				}
				.price {
					font-size: 56rpx;
					margin: 0 8rpx;
					color: var(--color2);
				}
				.unit {
					font-size: 28rpx;
				}
			}
			.right {
				// width: 460rpx;
				height: 100%;
				box-sizing: border-box;
				padding-left: 60rpx;
				line-height: 48rpx;
				.tit {
					font-size: 32rpx;
				}
				.end {
					font-size: 28rpx;
				}
			}
		}
		.two {
			width: 332rpx;
			height: 128rpx;
			.left {
				width: 104rpx;
				height: 100%;
				&::after {
					content: '';
					position: absolute;
					width: 32rpx;
					height: 16rpx;
					background: var(--bgcolor);
					border-radius: 0 0 16rpx 16rpx;
					top: -4rpx;
					right: -32rpx;
					border: 4rpx solid var(--color2);
					box-sizing: border-box;
					border-top: 4rpx solid var(--bgcolor);
				}
				&::before {
					content: '';
					position: absolute;
					width: 32rpx;
					height: 16rpx;
					background: var(--bgcolor);
					border-radius: 16rpx 16rpx 0 0;
					bottom: -4rpx;
					right: -32rpx;
					border: 4rpx solid var(--color2);
					box-sizing: border-box;
					border-bottom: 4rpx solid var(--bgcolor);
				}
				.price {
					font-size: 44rpx;
					margin-right: 2rpx;
					color: var(--color2);
				}
				.unit {
					font-size: 20rpx;
				}
			}
			.right {
				// width: 220rpx;
				height: 100%;
				box-sizing: border-box;
				padding-left: 32rpx;
				line-height: 40rpx;
				.tit {
					font-size: 26rpx;
				}
				.end {
					font-size: 22rpx;
				}
			}
		}
	}
	// 横向滑动
	.max {
		width: 100%;
		white-space: nowrap;
		overflow-x: scroll;
		overflow-y: hidden;
		>view {
			margin-left: 20rpx;
			flex-shrink: 0;
			// overflow: hidden;
			&:first-child{
				margin-left: 0;
			}
		}
	}
	// 领取弹出层
	.cont {
		image {
			width: 600rpx;
			height: 460rpx;
		}
		.left {
			width: 336rpx;
			height: 214rpx;
			top: 0;
			left: 30rpx;
			.price {
				color: #E71000;
			}
		}
		.right {
			width: 200rpx;
			height: 214rpx;
			top: 0;
			right: 30rpx;
		}
		.btn {
			width: 300rpx;
			height: 72rpx;
			background: linear-gradient(#FFDA60, #FFE7AB, #FED95B);
			border-radius: 36rpx;
			color: #E71000;
			left: 50%;
			transform: translateX(-50%);
			bottom: 100rpx;
		}
		.close {
			top: -80rpx;
			right: -40rpx;
		}
	}
</style>